<template>
	<view class="login-container">
		<!-- 自定义状态栏 -->
		<view class="custom-status-bar" :style="{ paddingTop: statusBarHeight + 'px', height: (statusBarHeight + navBarHeight) + 'px' }">
			<view class="nav-bar" :style="{ height: navBarHeight + 'px' }">
				<!-- 返回按钮 -->
				<view class="back-btn" @click="goBack" :style="{ top: (menuButtonInfo.top - statusBarHeight) + 'px' }">
					<text class="back-text">‹</text>
				</view>
			</view>
		</view>

		<!-- 3D打印机图标 -->
		<view class="logo-container" :style="{ marginTop: (statusBarHeight + navBarHeight + 40) + 'px' }">
			<!-- <image src="/static/image/login_img_logo.png" class="logo-icon" mode="aspectFit"></image> -->
       食堂采购系统 - 食堂端
		</view>

		<!-- 登录表单 -->
		<view class="form-container">
			<!-- 用户名输入框 -->
			<view class="input-container">
				<input type="text" v-model="username" placeholder="请输入用户名" class="input-field"
					placeholder-class="placeholder-style" />
			</view>

			<!-- 密码输入框 -->
			<view class="input-container">
				<input :type="showPassword ? 'text' : 'password'" v-model="password" placeholder="请输入密码"
					class="input-field password-field" placeholder-class="placeholder-style" />
				<view class="eye-icon" @click="togglePassword">
					<image :src="showPassword ? '/static/image/eye-open.png' : '/static/image/eye-close.png'"
						class="eye-image" mode="aspectFit"></image>
				</view>
			</view>

			<view style="display: flex;align-items: center;justify-content: space-between;margin-bottom: 80rpx;">
				<!-- 忘记密码 -->
				<view class="forgot-password">
					<text @click="forgotPassword"></text>
				</view>

				<!-- 注册链接 -->
				<view class="register-link">
          忘记密码？
					<text class="register-text" @click="goToRegister">请联系管理员</text>
				</view>
			</view>

			<!-- 登录按钮 -->
			<view class="login-btn primary-button" @click="handleLogin">登录</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: '',
				password: '',
				showPassword: false,
				isAgreed: false,
				statusBarHeight: 50,
				navBarHeight: 0,
				menuButtonInfo: {}
			};
		},
		onLoad() {
      this.$store.commit('SET_ROLE', 1)
			if (this.userInfo.id && this.role === 1) {
        uni.switchTab({
          url: '/pages/workorder/workorder'
        })
      }
		},

		methods: {
			// 获取系统信息和胶囊按钮信息
			getSystemInfo() {
				// 获取系统信息
				const systemInfo = uni.getSystemInfoSync();
				this.statusBarHeight = systemInfo.statusBarHeight;

				// 获取胶囊按钮信息
				if (uni.getMenuButtonBoundingClientRect) {
					this.menuButtonInfo = uni.getMenuButtonBoundingClientRect();
					// 计算导航栏高度：胶囊按钮高度 + 胶囊按钮距离顶部的距离 + 胶囊按钮距离底部的距离
					this.navBarHeight = this.menuButtonInfo.height + (this.menuButtonInfo.top - this.statusBarHeight) * 2;
				} else {
					// 如果获取不到胶囊按钮信息，使用默认高度
					this.navBarHeight = 44;
				}
			},

			// 返回上一页
			goBack() {
				uni.navigateBack({
				});
			},

			// 切换密码显示/隐藏
			togglePassword() {
				this.showPassword = !this.showPassword;
			},
			// 普通登录
			handleLogin() {
				if (!this.username) {
					uni.showToast({
						title: '请输入用户名',
						icon: 'none'
					});
					return;
				}

				if (!this.password) {
					uni.showToast({
						title: '请输入密码',
						icon: 'none'
					});
					return;
				}

				uni.showLoading({
					title: '登录中...'
				});

				this.$api.purchaseLogin({
						username: this.username,
						password: this.password
					}).then(res => {
						console.log(res);

						uni.hideLoading();
					uni.showToast({
						title: '登录成功',
						icon: 'success'
					});
					this.$store.commit('SET_USERINFO', res)
					this.$store.commit('SET_ROLE', 1)
					// 登录成功后跳转
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/workorder/workorder'
							});
						})
					}, 1000);
			},
			// 忘记密码
			forgotPassword() {
        // 请联系管理员
			},

			// 跳转注册
			goToRegister() {

			},
		},
	}
</script>

<style lang="scss" scoped>
	.login-container {
		min-height: 100vh;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 0 40rpx;
		box-sizing: border-box;
	}

	// 自定义状态栏
	.custom-status-bar {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1000;
		background-color: #fff;
	}

	.nav-bar {
		position: relative;
		display: flex;
		align-items: center;
		padding: 0 32rpx;
	}

	.back-btn {
		position: absolute;
		left: 32rpx;
		z-index: 1001;
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: rgba(255, 255, 255, 0.9);
		border-radius: 50%;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);

		&:active {
			opacity: 0.7;
		}
	}

	.back-text {
		font-size: 48rpx;
		color: #333;
		font-weight: bold;
		line-height: 1;
	}

	.page-title {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		z-index: 1001;
	}

	.title-text {
		font-size: 34rpx;
		color: #333;
		font-weight: 500;
	}

	.logo-container {
		margin-top: 240rpx;
		margin-bottom: 120rpx;
	}

	.logo-icon {
		width: 200rpx;
		height: 200rpx;
		background-color: #e0e0e0;
		border-radius: 50%;
	}

	.form-container {
		width: 100%;
		max-width: 600rpx;
	}

	.input-container {
		position: relative;
		margin-bottom: 40rpx;
	}

	.input-field {
		width: 100%;
		height: 88rpx;
		background-color: #fff;
		border-radius: 12rpx;
		border: 2rpx solid #D0D3D5;
		padding: 0 30rpx;
		font-size: 28rpx;
		color: #333;
		box-sizing: border-box;
	}

	.password-field {
		padding-right: 80rpx;
	}

	.placeholder-style {
		color: #999;
	}

	.eye-icon {
		position: absolute;
		right: 30rpx;
		top: 50%;
		transform: translateY(-50%);
		width: 40rpx;
		height: 40rpx;
	}

	.eye-image {
		width: 100%;
		height: 100%;
	}

	.forgot-password {
		text-align: left;

		text {
			color: #666;
			font-size: 26rpx;
		}
	}

	.register-link {
		display: flex;
		justify-content: flex-end;
		font-size: 26rpx;

		text {
			color: #666;
		}

		.register-text {
			color: #ff6b35 !important;
			margin-left: 10rpx;
		}
	}

	.login-btn {
		margin-bottom: 80rpx;
	}

	.other-login {
		margin-bottom: 60rpx;
	}

	.other-login-text {
		display: block;
		text-align: center;
		color: #999;
		font-size: 26rpx;
		margin-bottom: 40rpx;
	}

	.login-methods {
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.login-method {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20rpx;
		position: relative;

		.wechat-login-btn {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
			opacity: 0;
		}
	}

	.method-icon {
		width: 80rpx;
		height: 80rpx;
		margin-bottom: 16rpx;
		border-radius: 50%;
	}

	.method-text {
		color: #666;
		font-size: 24rpx;
	}

	.agreement-container {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		font-size: 24rpx;
		line-height: 1.5;
	}

	.checkbox-container {
		display: flex;
		align-items: center;
		margin-right: 10rpx;
	}

	.checkbox {
		width: 28rpx;
		height: 28rpx;
		border: 2rpx solid #ddd;
		border-radius: 4rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 8rpx;

		&.checked {
			background-color: #ff6b35;
			border-color: #ff6b35;
		}
	}

	.checkmark {
		color: #fff;
		font-size: 20rpx;
		font-weight: bold;
	}

	.agreement-text {
		color: #666;
	}

	.link-text {
		color: #ff6b35;
		margin: 0 6rpx;
	}
</style>
